<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小游戏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 30px;
            height: 30px;
            position: absolute;
        }
    </style>
</head>
<body>
    
</body>
<script>
    alert("欢迎使用兵哥小游戏...")
    //随机返回颜色的方法
    function createColor(){
        let str = '0123456789ABCDEF'
        let res = '#'
        for(let i=0;i<6;i++){
            res+= str[Math.floor( Math.random()*16)]
        }
        return res;
    }

    function c(v){
        return document.createElement(v)
    }

    /* window.onclick = function(e){
        let div = c("div")
        div.style.left = e.pageX+"px"
        div.style.top = e.pageY+"px"
        div.style.background = createColor()
        document.body.append(div)
    } */

    let maxWidth = window.innerWidth -30    //最大宽度
    let maxHeight = window.innerHeight -30  //最大高度

    setInterval(() => {
        let div = c("div")
        div.style.left = Math.floor(Math.random() * maxWidth) + 'px'
        div.style.top = Math.floor(Math.random() * maxHeight) + 'px'
        div.style.background = createColor()
        div.onclick = function(){
            this.remove()
        }
        document.body.append(div)
    }, 1000);

    setInterval(() => {
        let divs = document.querySelectorAll("div")
        if(divs.length>=10){
            alert("Game Over~~")
            document.body.innerHTML = "";
        }
    }, 5000);
</script>
</html>